Note: You can combine Bootstrap and CSS styling. It all works!!!!
Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.
The page uses Bootstrap combined with styles CSS as well as javascript all framed within HTML.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <style> div.one { font-family:Verdana; font-size:150%; text-decoration:underline; } div.two { font-family:serif; font-size:150%; border:5px dashed rgb(255,102,153); } </style> </head> <body> <div class="container mt-3"> <h1>Spacing Utilities</h1> <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p> <div class="pt-4 bg-warning text-center one">I only have a top padding (1.5rem)</div> <div class="p-5 bg-success text-center two">I have a padding on all sides (3rem)</div> <div class="m-5 pb-5 bg-info text-center">I have a margin on all sides (3rem) and a bottom padding (3rem)</div> </div> </body> </html>
Return to Table of Contents